<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Map" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
    <meta charset="utf-8"/>
    <title>earth :: an animated map of global wind and weather</title>
    <meta itemprop="name"                                      content="earth"/>
    <meta itemprop="description"     name="description"        content="an animated map of global wind and weather"/>
    <meta itemprop="author"          name="author"             content="Cameron Beccario"/>

    <meta property="og:type"        content="website"/>
    <meta property="og:title"       content="earth"/>
    <meta property="og:description" content="An animated map of global wind and weather. Visit the community at https://www.facebook.com/EarthWindMap"/>
    <meta property="og:url"         content="http://earth.nullschool.net"/>
    <meta property="og:image"       content="http://earth.nullschool.net/preview.jpg"/>

    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="apple-touch-icon" sizes="120x120" href="/iphone-icon.png"/>
    <link rel="apple-touch-icon" sizes="152x152" href="/ipad-icon.png"/>
    <link rel="stylesheet" type="text/css" href="/styles/styles.css"/>

    <link rel="alternate" hreflang="x-default" href="http://earth.nullschool.net/"/>
    <link rel="alternate" hreflang="ja" href="http://earth.nullschool.net/jp/"/>
</head>
<body data-lang="en">

    <!--[if lte IE 8]><p id="warn">This site requires IE9 or newer.</p><![endif]-->
    <div id="display">
        <svg id="map" class="fill-screen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
        <canvas id="animation" class="fill-screen"></canvas>
        <canvas id="overlay" class="fill-screen"></canvas>
        <svg id="foreground" class="fill-screen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
         <div id="overlayd" style="position: absolute;
         background-color: rgba(5, 10, 30, 0.85);
    border-radius: 0.5rem/0.5rem; padding: 0.5rem 1rem 0.5rem 1rem; bottom: 20px;
    right: 20px; ">
            <p> <canvas id="scalelabels" style=" height: 30em; width: 3em;"></canvas>
                <canvas id="scale" style=" height: 30em; width: 3em;"></canvas></p>
            <p><span id="scale-label" >Scale </span></p>
    </div>
    
    </div>

    <div id="sponsor" class="invisible">
        <p><span id="sponsor-hide" class="text-button invisible"> ✕ </span>community</p>
        <a id="sponsor-link" href="https://www.facebook.com/EarthWindMap">EarthWindMap</a>
    </div>

    <div id="details">
        <p id="status"></p>
        <div id="location">
            <p>
                <span id="location-coord"></span>
                <span id="location-close" class="invisible text-button"> ✕ </span>
            </p>
            <p>
                <span id="location-wind"></span>
                <span id="location-wind-units" class="text-button"></span>
            </p>
            <p>
                <span id="location-value"></span>
                <span id="location-value-units" class="text-button"></span>
            </p>
        </div>

        <!--<div id="scalediv" class="fill-screen" style="position: absolute; top: -500px; left: 0px; width: 240px; background-color: azure;">
        </div>-->

        <p id="earth">
            <span id="show-menu" class="text-button" title="menu">earth</span>
            <span id="progress" class="invisible"></span>
        </p>

        <div id="menu" class="invisible">
            <p>Date | <span
                id="data-date" class="utc"></span>
            </p>
            <p>Data | <span id="data-layer"></span></p>
            <!--
            <p>Source | <span id="data-center"></span></p>
            -->
            <p>Control | <span
                class="text-button" id="nav-now" title="Current Conditions">Now</span><span
                class="text-button" id="nav-backward-more"> « </span> – <span
                class="text-button" id="nav-backward"> ‹ </span> – <span
                class="text-button" id="nav-forward"> › </span> – <span
                class="text-button" id="nav-forward-more"> » </span><span
                class="text-button" id="show-location" title="Current Position">〖◯〗</span><span
                class="text-button" id="option-show-grid" title="Toggle Grid">Grid</span>
            </p>
            <p>Jump To |
            Date: <input type="text" name="date" value="YYYY-MM-DD" id="jdate">
            Hour:
            <select id="hbox">
                <option value="00">00:00</option>
                <option value="03">03:00</option>
                <option value="06">06:00</option>
                <option value="09">09:00</option>
                <option value="12">12:00</option>
                <option value="15">15:00</option>
                <option value="18">18:00</option>
                <option value="21">21:00</option>
            </select> 
            <span id="jgo" class="text-button">Go</span>
            </p>
            <!--
            <p>Mode | <span
                class="text-button" id="wind-mode-enable">Air</span> – <span
                class="text-button" id="ocean-mode-enable">Ocean</span>
            </p>
        -->
            <p class="wind-mode">Level: <select id="sbox">
                <option value="surface-level">Surface</option>
                <option value="trop-level">Tropopause</option>
                <option value="tropIrr-level">Trop-Irrot</option>
                <option value="isobaric-1000hPa">1000hPa</option>
                <option value="isobaric-850hPa">850hPa</option>
                <option value="isobaric-700hPa">700hPa</option>
                <option value="isobaric-500hPa">500hPa</option>
                <option value="isobaric-300hPa">300hPa</option>
                <option value="isobaric-250hPa">250hPa</option>
                <option value="isobaric-200hPa">200hPa</option>
                <option value="isobaric-70hPa">70hPa</option>
                <option value="isobaric-10hPa">10hPa</option>
            </select>
            <p class="wind-mode">Overlay | <select id="obox">
                <option value="overlay-wind">Wind</option>
                <option value="overlay-twspd">twspd</option>
                <option value="overlay-temp">Temp</option>
                <option value="overlay-theta">Theta</option>
                <option value="overlay-relative_humidity">Rel. Humid.</option>
                <option value="overlay-air_density">Air Density</option>
                <option value="overlay-wind_power_density">Wind Pow.</option>
                <option value="overlay-off">Off</option>
            </select> 
            <p class="ocean-mode invisible">Animate | <span
                class="text-button" id="animate-currents" title="Currents">Currents</span>
            </p>
            <p class="ocean-mode invisible">Overlay | <span
                class="text-button" id="overlay-ocean-off">None</span> – <span
                class="text-button" id="overlay-currents" title="Currents">Currents</span>
            </p>
            <p class="ocean-mode invisible"><span style="visibility:hidden">Overlay |</span></p>
            <p>Projection | <select id="pbox">
                <option value="orthographic">O</option>
                <option value="atlantis">A</option>
                <option value="azimuthal_equidistant">AE</option>
                <option value="conic_equidistant">CE</option>
                <option value="equirectangular">E</option>
                <option value="stereographic">S</option>
                <option value="waterman">WB</option>
                <option value="winkel3">W3</option>
            </select>
            <!--<p>免責事項 | 正確な情報を提供するためのものではありません</p>-->
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.10/d3.min.js" charset="utf-8"></script>
<!--

    <script src="/libs/underscore.js/1.6.0/underscore.js" charset="utf-8"></script>
    <script src="/libs/backbone.js/1.1.0/backbone.js" charset="utf-8"></script>
    <script src="/libs/topojson/1.1.0/topojson.js" charset="utf-8"></script>
    <script src="/libs/d3/3.3.10/d3.js" charset="utf-8"></script>
-->

    <script src="/libs/d3.geo/0.0.0/d3.geo.projection.v0.min.js" charset="utf-8"></script>
    <script src="/libs/d3.geo/0.0.0/d3.geo.polyhedron.v0.min.js" charset="utf-8"></script>
    <script src="/libs/when/2.6.0/when.js" charset="utf-8"></script>

    <script src="/libs/earth/1.0.0/micro.js" charset="utf-8"></script>
    <script src="/libs/earth/1.0.0/globes.js" charset="utf-8"></script>
    <script src="/libs/earth/1.0.0/products.js" charset="utf-8"></script>
    <script src="/libs/earth/1.0.0/earth.js" charset="utf-8"></script>

</body>
</html>
